<template>
	<view>
		<u-navbar :is-back="false" title="看视频" title-size="30">
			<template slot="left">
				<view class="u-margin-left-10" style="width: 200rpx;" @click="go_book">
					<u-icon name="edit-pen" color="#4066F4"></u-icon><text style="color:#4066F4 ;">视频订单</text>
				</view>

			</template>
		</u-navbar>
		
		
		<view style="width: 700rpx;margin: auto;">
			<u-search placeholder="搜索视频" v-model="initial.parm.keyword" :animation="true" bg-color="#fff"
				border-color="#333" :action-style="{color:'#818DFF',}"  @custom="search" @search="search">
			</u-search>
		</view>
		
		<u-popup v-model="objInfoShow" mode="center" border-radius="20">
			<view class="u-padding-20" style="width: 700rpx;">
				<u-parse :html="objInfo.detail"></u-parse>
			</view>
		</u-popup>

		<u-tabs :list="nav" :is-scroll="true" :current="current" name="classifyName" @change="change"></u-tabs>

		<view v-if="current" class=" shadow" style="width: 700rpx;margin: auto;">
			<view class="u-flex u-row-between u-padding-bottom-20 u-border-bottom">
			  <view class="u-font-weight">{{objInfo.classifyName}}</view>
			   <view class="$u-type-primary" @click="objInfoShow=true">
				   查看详情
			   <u-icon name="arrow-right" color="$u-type-primary"></u-icon>
			   </view>
			</view>
			<view class="u-flex u-padding-top-20">
				<u-image :src="objInfo.cover" width="150" height="150" ></u-image>
				<view class="u-line-2 u-flex-2 $u-type-info">{{objInfo.description}}</view>
			</view>
		</view>
		  
  <image :src="$ftpUrl('/want_video.png')" class="want" @click="want_video"></image>

		<waterfall :list="list" :elseWay="true" v-if="list.length" @go="go"></waterfall>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect">
					<video autoplay :src="$Url(video)" @tap.stop style="width: 100%;height: 100%;"></video>
				</view>
			</view>
		</u-mask>
<backTop></backTop>


		<u-loadmore :status="initial.status" />
	</view>
</template>

<script>
	import loader from '@/common/loadPage.js';
	import waterfall from '@/components/waterfall';
	import backTop from '../../components/backTop';
	export default {
		mixins: [loader],
		components: {
			waterfall,
			backTop,
		},
		data() {
			return {
				list: [],
				initial: {
					geturl: "/index/video",
					parm: {
						video_classify_id: "",
						keyword:''
					},
					isPage: true
				},
				nav: [],
				current: 0,
				show: false,
				video: "",
				objInfo:'',
				objInfoShow:false
			}
		},
		watch: {
			show(v) {
				if (!this.show) {
					this.video = ''
				}
			},
			current(v){
				if(v){
					this.objInfo=this.nav[v];
				}
			}
		},
		onLoad() {
			this.getClass()
			this.getGoods()
		},
		methods: {
			search(e){
				this.list = [];
				this.initial.parm.keyword = e;
				this.initial.page = 1;
				this.getGoods()
			},
			want_video(){
				uni.navigateTo({
					url:"./want_video"
				})
			},
			getClass() {
				this.$u.post('/index/videoClassify', {}).then(res => {
					res.unshift({
						classifyName: "全部",
						id: 0
					})
					this.nav = res;
				}).catch(err => {})
			},
			go(item) {
				this.show = true;
				this.video = item.video
			},
			go_book(item) {
				uni.navigateTo({
					url: "./book"
				})
			},
			change(e) {
				this.current = e;
				this.list = [];
				this.initial.parm.video_classify_id = this.nav[e].id;
				this.initial.page = 1;
				this.getGoods()
			}
		}
	}
</script>

<style>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 400px;
		height: 400px;
		background-color: #fff;
	}
	
	.want{
		position: fixed;
		right: 0;
		bottom: 100rpx;
		width: 180rpx;
		height: 80rpx;
		z-index: 999;
	}
</style>
